<template>
    <van-tabbar v-model="active">
        <van-tabbar-item name="/home" icon="notes-o" @click="link('/home')">明细</van-tabbar-item>
        <van-tabbar-item name="/data" icon="bar-chart-o" @click="link('/data')">统计</van-tabbar-item>
        <van-tabbar-item name="/user" icon="user-o" @click="link('/user')">我的</van-tabbar-item>
    </van-tabbar>

</template>

<script>

import { useRouter } from 'vue-router';
import {ref,onMounted} from 'vue';

export default {
    setup() {
        const active = ref('/home');
        const router = useRouter();
        console.log(router,'----');
        const link = (path) => {

            router.push({path});

        }

        onMounted(() => {
             
        })

        // router.afterEach(() => {
        //     active.value = router.currentRoute.value.path;  
        // })

        return {
            link,active,router
        }
        
    },
    
}
</script>

<style lang="less">
@import url('../config/custom.less');
.van-tabbar-item--active {
    color:@primary ;
}
</style>